<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")
  cvs.width = 400;
  cvs.height = 400;

  const c2d = cvs.getContext("2d");

  // 实5虚5实5虚5实5虚5实5虚5......
  // c2d.setLineDash([5]);
  // 实5虚10实5虚10实5虚10......
  c2d.setLineDash([5, 10]);
  // 实5虚15实20虚5实15虚20实5虚15实20虚5实15虚20......
  // c2d.setLineDash([5, 15, 20]);

  c2d.lineWidth = 6;
  c2d.strokeRect(100,100, 200,200);

  c2d.moveTo(100, 50);
  c2d.lineTo(300, 50);
  c2d.stroke();

  c2d.font = "50px 黑体";
  c2d.textAlign = "center";
  c2d.strokeText("千锋H5", 200, 200);
  
</script>
</html>